<!-- 右侧边栏 -->
<template>
	<div class="lb-sidebar">
		<div class="menu">
			<vue-scroll :ops="ops">
				<ul class="menu-top" @click="showDialog">
					<router-link v-for="(item, index) in routes" tag="li" :key="index" active-class="menu-active" :to="item.path" :style="{ marginTop: item.meta.menuName === 'diy' ? '50px' : '0' }" v-show="!item.isHidden">
						<i v-if="item.meta.icon" class="iconfont" :class="item.meta.icon"></i>
						<img v-else :src="item.meta.img" />
						{{ $t('menu.' + item.meta.menuName) }}
					</router-link>
				</ul>
			</vue-scroll>
		</div>
		<div :class="subnav.length > 0 ? 'isopen' : ''" class="submenu">
			<vue-scroll :ops="ops" >
				<el-collapse v-for="(item, index) in subnav" :key="index" v-model="activeNames">
					<div :title="$t('menu.' + item.name)" :name="index">
						<div class="item" v-for="(items, indexs) in item.url" :key="indexs">
							<router-link  tag="span" active-class="el-collapse-item-active" :to="items.url">{{ $t('menu.' + items.name) }}</router-link>
						</div>
					</div>
				</el-collapse>
			</vue-scroll>
		</div>
		<!-- <div v-if="userInfo.is_admin == 1" :class="subnav.length > 0 ? 'isopen' : ''" class="submenu">
			<vue-scroll :ops="ops">
				<el-collapse v-for="(item, index) in subnav" :key="index" v-model="activeNames">
					<el-collapse-item v-if="!item.is_admin_type || item.is_admin_type !=0" :title="$t('menu.' + item.name)" :name="index">
						<div class="item" v-for="(items, indexs) in item.url" :key="indexs">
							<router-link tag="span" v-if="!items.is_admin_type || items.is_admin_type !=0" active-class="el-collapse-item-active" :to="items.url">{{ $t('menu.' + items.name) }}</router-link>
						</div>
					</el-collapse-item>
				</el-collapse>
			</vue-scroll>
		</div> -->
	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import vuescroll from 'vuescroll';
export default {
	data() {
		return {
			userInfo: {},
			isFirst: true,
			routes: [], // 路由表
			subnav: [], // 二级菜单表
			activeNames: [], // 二级菜单展开的配置
			ops: {
				vuescroll: {
					wheelScrollDuration: 600,
				},
				scrollPanel: {
					initialScrollY: false,
					initialScrollX: false,
					scrollingX: true,
					scrollingY: true,
					speed: 1000,
					easing: undefined,
					verticalNativeBarPos: 'right',
				},
				rail: {},
				bar: {
					showDelay: 500,
					onlyShowBarOnScroll: true,
					keepShow: false,
					background: '#c1c1c1',
					opacity: 0.5,
					hoverStyle: false,
					specifyBorderRadius: false,
					minSize: false,
					size: '6px',
					disable: false,
				},
			},
		};
	},
	computed: {
		...mapState({
			promptData: (state) => state.routes.promptData,
		}),
	},
	components: {
		vuescroll,
	},
	created() {
		this.handleRoute();
		this.handleSubnav(this.$route.name);
		this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));
	},
	methods: {
		...mapMutations(['changePromptData']),
		showDialog() {
			// this.$api.getAgentAuthStatus().then(res => {
			//   this.changePromptData(res.data)
			//   this.status = res.data.status
			// })
		},
		/**
		 * @method 处理路由表，渲染到侧边栏
		 */
		handleRoute() {
			let { routes } = this.$store.getters; // JSON.parse(localStorage.getItem('routes'))
			// console.log(routes)
			this.routes = routes.filter((item) => {
				if (!item.hidden) {
					return item;
				}
			});
		},
		/**
		 * @method 处理二级菜单导航
		 */
		handleSubnav(name) {
			let { routes } = this;
			// console.log(routes)
			for (let i = 0, len = routes.length; i < len; i++) {
				let children = routes[i].children;
				for (let j = 0, l = children.length; j < l; j++) {
					if (children[j].name === name) {
						this.subnav = routes[i].meta.subNavName || [];
						this.$store.commit(
							'handleSideBarSwitch',
							this.subnav.length > 0
						);
						this.openSubnav();
						break;
					}
				}
			}
		},
		/**
		 * @method 展开二级菜单
		 */
		openSubnav() {
			let arr = [];
			this.subnav.forEach((item, index) => {
				arr.push(index);
			});
			this.activeNames = arr;
		},
	},
	watch: {
		$route: {
			handler(val, oldVal) {
				this.handleSubnav(val.name);
			},
			// 深度观察监听
			deep: true,
		},
	},
};
</script>

<style lang="scss" scoped>
.lb-sidebar {
	position: fixed;
	top: 70px;
	left: 0;
	display: flex;
	height: calc(100% - 70px);
	z-index: 2;
	.menu {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 160px;
		height: 100%;
		background: #191a23;
		z-index: 3;
		.menu-top {
			width: 100%;
			color: #fff;
			font-size: 14px;
			text-align: center;
			line-height: 50px;
			li {
				width: 100%;
				min-height: 50px;
				padding: 18px 8px;
				line-height: 20px;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				i {
					margin-right: 10px;
				}
				img {
					display: inline-block;
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}
				&:hover {
					color: #fff;
					background-color: #26394b;
				}
			}
			.menu-active {
				background: #21cf21;
				color: #fff;
				&:hover {
					color: #fff;
				}
			}
		}
	}
	.submenu {
		position: absolute;
		top: 0;
		left: 160px;
		z-index: 2;
		width: 139px;
		height: 100%;
		background: #fff;
		display: none;
		transition: all 0.2s linear;
		.el-collapse {
			margin: 0 auto;
			border-top: 1px;
			.item {
				width: 100%;
				cursor: pointer;
				text-align: center;
				span {
					display: inline-block;
					width: 100%;
					line-height: 45px;
				}
				&:hover {
					span {
						background-color: #f5faff;
						color: #21cf21;
					}
					.el-collapse-item-active {
						color: #21cf21;
					}
				}
				.el-collapse-item-active {
					position: relative;
					width: 100%;
					display: inline-block;
					background: #c9f9c9;
					border-radius: 2px;
					text-align: center;
					color: #21cf21;
					font-weight: bold;
				}
				.el-collapse-item-active:before {
					content: '';
					display: block;
					width: 2px;
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					background: #21cf21;
				}
			}
		}
	}
	.isopen {
		width: 139px;
		display: block;
	}
}
</style>
